<?php
/**
 * @link https://www.kancloud.cn/cleverstone/ymb2
 * @copyright Copyright (c) 2020 Yii Manager Software LLC
 */

namespace builder\widget\ajax;

use builder\helper\H5;
use builder\widget\BaseWidget;
use yii\helpers\Json;

/**
 * Layui轮播图
 * ```php
 LayCarousel::widget([
 *      'width' => '620px',
 *      'height' => '300px',
 *      'full' => false,
 *      'anim' => 'fade',
 *      'autoplay' => true,
 *      'interval' => 2000,
 *      'index' => 0,
 *      'arrow' => 'always',
 *      'indicator' => 'inside ',
 *      'trigger' => 'click',
 *      'onchange' => '',
 *      'items' => [
 *          H5::img('/uploads/IMAGE/816c29313f37fd402c2f650d5de94f22.jpg'),
 *          H5::img('/uploads/IMAGE/04d5c3c208e7e805572fd9b7c53af44b.webp'),
 *          H5::img('/uploads/IMAGE/d22ebf0418770f31bd1c148c84212fc5.webp'),
 *          H5::img('/uploads/IMAGE/5a4abdf2d0c2d0eddb4414e15787eb42.webp'),
 *          H5::img('/uploads/IMAGE/a421319d2f3fb4b8559ff2970dd7e9e7.webp'),
 *      ],
 * ]);
 * ```
 * @see https://layui.dev/docs/2/carousel/#options
 */
class LayCarousel extends BaseWidget
{
    public string $width = '600px';
    public string $height = '280px';
    /**
     * @var bool 是否全屏轮播
     */
    public bool $full = false;
    /**
     * @var string 轮播切换动画方式。可选值有：
     *
     * default 左右切换
     * updown 上下切换
     * fade 渐隐渐显切换
     */
    public string $anim = 'default';
    /**
     * @var string|bool 是否自动切换
     */
    public $autoplay = true;
    /**
     * @var int 自动切换的时间间隔，单位： ms （毫秒），不能低于 800
     */
    public int $interval = 3000;
    /**
     * @var int 初始开始的条目下标
     */
    public int $index = 0;
    /**
     * @var string 切换箭头默认显示状态，可选值有：
     *
     * hover 鼠标悬停显示
     * always 始终显示
     * none 始终不显示
     */
    public string $arrow = 'hover';
    /**
     * @var string 指示器位置，可选值有：
     *
     * inside 显示在容器内部
     * outside 显示在容器外部
     * none 不显示
     * 注 : 若设定了 anim: 'updown' ，则 outside 值无效
     */
    public string $indicator = 'inside';
    /**
     * @var string 指示器的触发事件
     */
    public string $trigger = 'click';
    /**
     * @var string 轮播切换后的回调函数，返回一个对象参数。
     */
    public string $onchange = '';
    /**
     * @var string[] 轮播条目
     */
    public array $items;

    public static $autoIdPrefix = 'Layui-Carousel';

    public function init()
    {
        parent::init();
    }

    public function run()
    {
        return $this->render('layui-carousel', [
            'options' => H5::encode(Json::encode([
                'id' => $this->id,
                'width' => $this->width,
                'height' => $this->height,
                'full' => $this->full,
                'anim' => $this->anim,
                'autoplay' => $this->autoplay,
                'interval' => $this->interval,
                'index' => $this->index,
                'arrow' => $this->arrow,
                'indicator' => $this->indicator,
                'trigger' => $this->trigger,
            ])),
            'onchange' => $this->onchange,
            'items' => $this->items,
        ]);
    }
}